import React from 'react'
import PropTypes from 'prop-types'
import { Row, Col,Icon} from 'antd';
import styles from './List.less'
import classnames from 'classnames'
import { AnimTableBody } from '../../components'
import { DropOption } from '../../components'

class view extends React.Component {
	state = {
		combobox:[],
		mynameInput:'',
		checked: true,
		name:false,
	}
  render() {
  	const { roleTitle, alluserlist,onClose} = this.props
	let rolePerMap=[]
	for(let x in alluserlist.rolePerMap){
		for(let i=0;i<alluserlist.rolePerMap[x].length;i++){
			if(alluserlist.rolePerMap[x][i].checked){
				rolePerMap.push(<Col className={styles.viewbx} xl = {3} lg ={4} md={5} sm={6} xs={8}>{alluserlist.rolePerMap[x][i].displayName}</Col>)
			}
		}
	}
    return (
	<div>
		<div className={styles.filterTop}>
			<div className={styles.title}>
				<span style={{marginRight:20}}>{roleTitle}</span>
			</div>
			<div className={styles.Searchright}>
			<Icon type="close" onClick={onClose} style={{ fontSize: 24,marginTop:17, color: '#000',cursor: 'pointer',fontWeight:'bold' }} />
			</div>
		</div>
		<div>
			<Row gutter={16}>{rolePerMap}</Row>
		</div>
    </div>
    );
  }
}


export default view
